<template>
  <view class="card" @click="gotoCustomerList(2)">
    <view class="title_box">
      <view> {{ title }}</view>
    </view>
    <view class="charts-box">
      <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  // watch: {
  //   data: {
  //     handler(newVal) {
  //       console.log(this.data);
        
  //       this.getServerData();
  //     },
  //     immediate: true,
  //   },
  // },
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        rotate: false,
        rotateLock: false,
        color: [
          "#73a0fa",
          "#73deb3",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        // padding: [5, 5, 5, 5],
        dataLabel: true,
        enableScroll: true,
        legend: {
          show: true,
          position: "top",
          padding: 0,
          lineHeight: 10,
          margin: 10,
        },
        title: {
          name: "",
          fontSize: 0,
          color: "#666666",
        },
        subtitle: {
          name: "",
          fontSize: 25,
          color: "#7cb5ec",
        },
        extra: {
          ring: {
            ringWidth: 21,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
        },
      },
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      console.log(this.data);
      //模拟从服务器获取数据时的延时
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        series: [
          {
            data: this.data,
          },
        ],
      };
      this.chartData = JSON.parse(JSON.stringify(res));
    },
    /**
     * 跳转客户列表
     */
     gotoCustomerList(type) {
      // 1锁单 2跟单 4奖励客资
      uni.navigateTo({
        url: "/pages/customer/myCustomerList?type="+type,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 24rpx;
  background: #fff;
  border-radius: 18rpx;
  box-sizing: border-box;
  margin-top: 24rpx;

  .title_box {
    font-size: 28rpx;
    font-weight: bolder;
    color: #1c1b26;
    margin-bottom: 24rpx;
  }
}
.charts-box {
  width: 100%;
  height: 350rpx;
}
</style>
